// ----------------------------- 获取分类，渲染到页面中 ---------------------------
// 直接封装成函数，目的是，添加完成、删除完成、修改完之后，还要调用这个函数来重新渲染页面
// render -- 渲染
// category -- 类别
// ------------------------  获取类别列表，渲染到页面中 ---------------------// - category -- 类别
function renderCategory() {
    // 发送ajax请求，获取数据，注意请求头(Authorization）
    $.ajax({
      url: '/my/category/list',
      success: function (res) {
        // console.log(res);
        if (res.status === 0) {
          // 使用模板引擎渲染
          let arr = [];
          res.data.forEach(item => {
            arr.push(`<tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
            <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
            <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
            </tr>`);
          })
          $('tbody').html(arr.join(''))
        }
      }
    });
  }
renderCategory();

// 声明一个变量，让它表示弹层；后面关闭弹层时会用到它。
var addIndex;
// 一、点击添加分类，实现弹层
$('button:contains("添加类别")').click(function () {
    addIndex = layer.open({
        type: 1,
        title: '添加类别',
        content: $('#tpl-add').html(), // 内容在HTML中
        area: ['500px', '250px']
    });
});


// 二、提交表单数据，完成添加
// 注册表单的submit事件
$('body').on('submit', '#add-form', function (e) {
    e.preventDefault();
    // 规律：如果没有图片上传，一般都不使用FormData。
    // 具体：还得看接口要求
    var data = $(this).serialize(); // 一定要检查input是否有正确的name属性
    // ajax提交数据，完成添加
    $.ajax({
      type: 'POST',
      url: '/my/category/add',
      data: data,
      success: function (res) {
  
        // 添加成功
        if (res.status === 0) {
            layer.msg(res.message);
            // 更新数据
          renderCategory();
          // 关闭弹层
          layer.close(addIndex);
        }
      }
    });
  });